<template>
    <view class="coreshop-bg-white">
        <u-toast ref="uToast" /><u-no-network></u-no-network>
        <u-navbar title="店铺设置" safeAreaInsetTop fixed placeholder>
            <view class="coreshop-navbar-left-slot" slot="left">
                <u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
                <u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
                <u-icon name="home" size="22" @click="goHome"></u-icon>
            </view>
            <view slot="right">
            </view>
        </u-navbar>
        <view class="coreshop-padding-10 ">
            <u--form :model="form" :rules="rules" ref="uForm" errorType="message" labelPosition="left" labelWidth="80">
                <u-form-item label="店铺名称" prop="storeName" borderBottom>
                    <u--input type="text" placeholder='请输入店铺名称' v-model="form.storeName" />
                </u-form-item>
                <u-form-item label="店铺Logo" borderBottom>
                    <image class='coreshop-avatar xl radius bg-gray' mode="aspectFill" :src="form.storeLogo" @click="uploadLogo"></image>
                </u-form-item>
                <u-form-item label="店铺简介" prop="storeDesc" borderBottom>
                    <u--textarea v-model="form.storeDesc" placeholder="请您在此描述问题(最多200字)" maxlength="200" count></u--textarea>
                </u-form-item>
                <u-form-item label="店铺招牌" borderBottom>
                    <!--<u-upload :action="upLoadAction" ref="uUpload" :file-list="fileList" max-count="3" :max-size="2 * 1024 * 1024" width="120" height="120" :header="header"></u-upload>-->
                    <u-upload :fileList="fileList1"
                              @afterRead="afterRead"
                              @delete="deletePic"
                              name="1"
                              multiple
                              :maxSize="2 * 1024 * 1024"
                              width="200"
                              height="113"
                              :maxCount="3"></u-upload>
                </u-form-item>
            </u--form>
        </view>
        <!--按钮-->
        <view class="coreshop-bg-white coreshop-footer-fixed coreshop-foot-padding-bottom">
            <u-button type="error" size="normal" @click="submitHandler">保存</u-button>
        </view>
    </view>
</template>

<script>

    export default {
        data() {
            return {
                upLoadAction: this.$globalConstVars.apiBaseUrl + '/Api/Common/UploadImages',
                header: {
                    'Accept': 'application/json',
                    'Content-Type': 'multipart/form-data',
                    'Authorization': 'Bearer ' + this.$db.get('userToken')
                },
                fileList1: [],
                form: {
                    storeName: '',//店铺名称
                    storeLogo: '',
                    storeBanner: '',
                    storeDesc: '无',//店铺介绍
                },
                rules: {
                    storeName: [
                        {
                            required: true,
                            message: '请输入店铺名称',
                            trigger: ['blur', 'change']
                        }
                    ],
                    storeDesc: [
                        {
                            required: true,
                            message: '请输入店铺简介',
                            trigger: ['blur', 'change']
                        }
                    ]
                }
            }
        },
        onReady() {
            this.$refs.uForm.setRules(this.rules);
            //this.fileList = this.$refs.uUpload.lists;
        },
        methods: {
            // 删除图片
            deletePic(event) {
                this[`fileList${event.name}`].splice(event.index, 1)
            },
            // 新增图片
            async afterRead(event) {
                console.log(event);
                // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
                let lists = [].concat(event.file)
                let fileListLen = this[`fileList${event.name}`].length
                lists.map((item) => {
                    this[`fileList${event.name}`].push({
                        ...item,
                        status: 'uploading',
                        message: '上传中'
                    })
                })
                for (let i = 0; i < lists.length; i++) {
                    const result = await this.uploadFilePromise(lists[i].thumb)
                    var jmResult = JSON.parse(result);
                    console.log(result);
                    let item = this[`fileList${event.name}`][fileListLen]
                    this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
                        status: 'success',
                        message: '',
                        url: jmResult.data.src
                    }))
                    fileListLen++
                }
            },
            uploadFilePromise(url) {
                return new Promise((resolve, reject) => {
                    let a = uni.uploadFile({
                        url: this.upLoadAction, // 仅为示例，非真实的接口地址
                        fileType: 'image',
                        filePath: url,
                        header: {
                            'Accept': 'application/json',
                            'Content-Type': 'multipart/form-data',
                            'Authorization': 'Bearer ' + this.$db.get('userToken')
                        },
                        name: 'file',
                        success: (res) => {
                            setTimeout(() => {
                                resolve(res.data)
                            }, 1000)
                        }
                    });
                })
            },

            // 用户上传头像
            uploadLogo() {
                this.$upload.uploadFiles(null, res => {
                    if (res.status) {
                        this.form.storeLogo = res.data.src;
                    } else {
                        this.$u.toast(res.msg)
                    }
                })
            },
            submitHandler() {
                this.$refs.uForm.validate().then(res => {
                    if (!this.form.storeName || this.form.storeName == '') {
                        this.$u.toast('请填写店铺名称');
                        return;
                    }
                    if (this.fileList1.length <= 0) {
                        this.$u.toast('请上传店铺招牌');
                        return;
                    } else {
                        let images = [];
                        for (var i = 0; i < this.fileList1.length; i++) {
                            if (this.fileList1[i].url) {
                                images.push(this.fileList1[i].url);
                            } else if (this.fileList1[i].error == false) {
                                images.push(this.fileList1[i].response.data.fileUrl);
                            }
                        }
                        this.form.storeBanner = images.join(',');
                    }
                    if (!this.form.storeLogo) {
                        this.$u.toast('请上传店铺LOGO');
                        return;
                    }
                    this.$u.api.setDistributionStore({
                        storeName: this.form.storeName,
                        storeLogo: this.form.storeLogo,
                        storeBanner: this.form.storeBanner,
                        storeDesc: this.form.storeDesc
                    }).then(res => {
                        if (res.status) {
                            this.$refs.uToast.show({ message: res.msg, type: 'success', back: false })
                        } else {
                            this.$u.toast(res.msg);
                        }
                    });
                }).catch(errors => {
                    uni.$u.toast('提交的数据校验失败，请输入合法信息！')
                })
            }
        },
        onLoad: function () {
            var _this = this;
            _this.$u.api.getDistributionInfo({ check_condition: false }).then(res => {
                if (res.status) {
                    _this.form.storeName = res.data.storeName;
                    _this.form.storeDesc = res.data.storeDesc;
                    _this.form.storeLogo = res.data.storeLogo;
                    _this.form.storeBanner = res.data.storeBanner;
                    if (res.data.storeBanner) {
                        var arr = res.data.storeBanner.split(',');
                        for (var i = 0; i < arr.length; i++) {
                            _this.fileList1.push({
                                url: arr[i]
                            });
                        }
                    }
                } else {
                    //报错了
                    _this.$u.toast(res.msg);
                }
            });
        }
    }
</script>

<style lang="scss" scoped>
</style>
